<template>

<div class="container">
 <van-nav-bar
  title="默认初始佣金设置"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="content">
   <div class="content_money">
      <el-radio @change="focusInput('amount')"  v-model="commission.user_fee_type" :label="1"></el-radio>
      <div class="money_input_container">
         <div style="font-size:14px;width:100px">按金额抽成</div>
         <el-input  ref="amountInput" v-model="commission.user_fee_amount"></el-input>
      </div>
   </div>
   <div class="content_scale">
      <el-radio @change="focusInput('percent')" v-model="commission.user_fee_type" :label="0"></el-radio>
      <div class="scale_input_container">
         <div style="font-size:14px;width:100px">按比例抽成</div>
         <el-input ref="percentInput" v-model="commission.user_fee_percent"></el-input>
         <span style="font-size:16px">%</span>
      </div>
   </div>
   <div class="notes">新加入分销系统的用户将会使用该比例或金额作为其初始抽成设置</div>
   <div style="width:100%;padding:0 15px" class="save_container">
    <div class="save" @click="instoreClick">保存</div>
   </div>
</div>
</div>    
</template>
<script>
export default {  
  data(){
    return{
        commission:{
        "user_fee_percent": 0,
        "user_fee_amount": 0,
        "user_fee_type": 0,
      },
    }
  },
  mounted(){
    this.getInfo()
  },
  methods:{
    focusInput(type) {
    
      if (type === 'amount') {
        this.$refs.amountInput.focus();
      } else if (type === 'percent') {
        this.$refs.percentInput.focus();
      }
      // 阻止默认缩放行为
      document.body.style.zoom = 1;
    },
     onClickLeft(){
     this.$router.go(-1);
    },
    getInfo(){
      axios
        .get("/own/user/fee/get")
        .then(response => {
          if (response.data.msg.code == 0) {

            this.commission = response.data.data

          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    instoreClick(){
      
      axios
        .post("/own/user/fee/update",this.commission)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("设置成功");
             let param = null;
              if (this.commission.user_fee_type === 0) {
                param = { user_fee_percent: this.commission.user_fee_percent };
              } else if (this.commission.user_fee_type === 1) { 
                param = { user_fee_amount: this.commission.user_fee_amount };
              }
             this.$router.push({
              path: './fenxiaomoshi',
              query: param
      });
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
  }
}
</script>
<style scoped lang="less">
.container{
  width: 100vw;
  height: 100vh;
  background: white;
}
/deep/ .van-nav-bar .van-icon {
  color: black;
}
/deep/ .van-nav-bar__text {
  color: black;
}
.content{
  width: 100%;
  padding: 0 10px;
}
.content_money{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.content_scale{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.money_input_container{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: #F6F8FB;
  border-radius: 10px;
  margin-left: -25px;

}
.scale_input_container {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: #F6F8FB;
  border-radius: 10px;
  margin-left: -25px;
  padding-right: 10px;
}
/deep/ .scale_input_container .el-input__inner{
  width: 180px !important;
  height: 46px !important;
  border: 0 !important;
  touch-action: manipulation; 
}
/deep/ .money_input_container .el-input__inner{
  width: 200px !important;
  height: 46px !important;
  border: 0 !important;
  touch-action: manipulation; 
}
.notes{
  font-size: 11px;
  color: #999999;
  text-align: center;
  margin-top: 25px;
}
.save{
  width: 100%;
  height: 45px;
  background: #005AFF;
  color: white;
  border-radius: 20px;
  text-align: center;
  line-height: 45px;

}
.save_container{
  position: absolute;
  bottom: 15px;
  font-size: 16px;
  left: 0;
}
/deep/ .el-radio__label{
  display: none;
}
</style>